<template>
  <u-popup v-model="showInner" mode="center" border-radius="16" width="600rpx" :mask-close-able="true" @close="onClose">
    <view class="login-popup">
      <view class="popup-header">
        <view class="popup-title">登录</view>
        <view class="popup-close" @click="onClose">
          <u-icon name="close" color="#999" size="20"></u-icon>
        </view>
      </view>
      <view class="login-methods">
        <u-button type="success" shape="round" :loading="loading" @click="onWechatLogin" :custom-style="wechatBtnStyle">
          <u-icon name="weixin-fill" color="#fff" size="20" style="margin-right: 10rpx"></u-icon>
          {{ loading ? '登录中...' : '微信登录' }}
        </u-button>
      </view>
      <view class="login-tips">
        <text class="tips-text">登录即表示同意</text>
        <text class="link-text" @click="showPrivacy('agreement')">《用户协议》</text>
        <text class="tips-text">和</text>
        <text class="link-text" @click="showPrivacy('policy')">《隐私政策》</text>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'LoginPopup',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    wechatBtnStyle: {
      type: Object,
      default: () => ({
        backgroundColor: '#07c160',
        borderColor: '#07c160',
        marginBottom: '20rpx'
      })
    }
  },
  emits: ['update:modelValue', 'success', 'close'],
  data() {
    return {
      showInner: this.modelValue
    };
  },
  watch: {
    modelValue(val) {
      this.showInner = val;
    },
    showInner(val) {
      this.$emit('update:modelValue', val);
      if (!val) this.$emit('close');
    }
  },
  methods: {
    onClose() {
      this.showInner = false;
    },
    async onWechatLogin() {
      if (this.loading) return;
      // 只触发父组件登录流程，不主动关闭弹窗
      this.$emit('success');
    },
    showPrivacy(type) {
      // 触发父组件弹出协议弹窗
      this.$emit('show-privacy', type);
    }
  }
};
</script>

<style scoped>
.login-popup {
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  text-align: center;
}
.popup-header {
  margin-bottom: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.popup-close {
  padding: 10rpx;
  cursor: pointer;
}
.login-methods {
  margin-bottom: 30rpx;
}
.login-tips {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}
.tips-text {
  color: #666;
}
.link-text {
  color: #007aff;
}
</style>
